<template>
  <div>
    <h2>审核体检表</h2>
    <table class="physical-exam-table">
      <colgroup>
        <col style="width: 15%;">
        <col style="width: 15%;">
        <col style="width: 30%;">
        <col style="width: 20%;">
        <col style="width: 20%;">
      </colgroup>
      <thead>
      <tr>
        <th>ID</th>
        <th>学员ID</th>
        <th>审核</th>
        <th>操作</th>
        <th>状态</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="physicalExam in physicalExams" :key="physicalExam.id">
        <td>{{ physicalExam.id }}</td>
        <td>{{ physicalExam.stu_id }}</td>
        <td>
          <button @click="viewWordDocument(physicalExam.save_path)" class="view-btn">查看体检表</button>
        </td>
        <td>
          <button @click="sendBack(physicalExam.id)" class="send-back-btn">打回</button>
        </td>
        <td> <!-- 修改这里：添加审核状态按钮 -->
          <button :class="physicalExam.passed ? 'pass-btn' : 'failed-btn'" @click="changeStatus(physicalExam)">{{ physicalExam.passed ? '审核通过' : '审核未通过' }}</button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import './css/Check.css';
import mammoth from 'mammoth';
import axios from 'axios';
export default {
  name: 'PhysicalExamReview',
  data() {
    return {
      physicalExams: []
    };
  },
  mounted() {
    this.fetchPhysicalExams();
  },
  methods: {
    async fetchPhysicalExams() {
      try {
        const response = await axios.get('http://localhost:8081/material/CheckList');
        this.physicalExams = response.data.data;
      } catch (error) {
        console.error('获取体检表列表失败:', error);
      }
    },
    //查看word
    async viewWordDocument(filePath) {
      try {
        // 添加此行将路径转换为适合您服务器的格式
        const convertedPath = filePath ? filePath.replace(/^D:.*image/, '/image') : '/path/to/default/image.docx';

        // 从服务器获取 Word 文件
        const response = await axios.get(convertedPath, { responseType: 'arraybuffer' });

        // 创建一个 Blob 对象
        const wordBlob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });

        // 使用 mammoth 将 Word 文件转换为 HTML
        mammoth.convertToHtml({ arrayBuffer: wordBlob.arrayBuffer() }).then((result) => {
          const html = result.value; // 包含 Word 文档 HTML 内容的字符串

          // 在新窗口中打开 Word 文档的 HTML 格式内容
          const newWindow = window.open();
          newWindow.document.write(`<html><head>
        <style>
          body {
            font-family: 'Arial', sans-serif;
            margin: 50px;
            color: #333;
            text-align: center;
          }
          h1, h2, h3, h4, h5, h6 {
            color: #34495e;
            margin-top: 24px;
            margin-bottom: 16px;
          }
          p, li {
            font-size: 14px;
            line-height: 1.5;
            margin-bottom: 10px;
            text-align: left;
          }
          ul, ol {
            padding-left: 30px;
          }
          table {
            width: 100%;
            border-collapse: collapse;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
            margin-left:auto;
            margin-right:auto;
          }
          table th, table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
          }
          table th {
            background-color: #34495e;
            color: white;
            font-weight: bold;
          }
          table tbody tr:nth-child(even) {
            background-color: #f8f8f8;
          }
          table tbody tr:hover {
            background-color: #e8f1f8;
          }
          img {
            max-width: 100%;
          }
        </style>
        </head>
        <body>` +
              html +
              `</body></html>`);

          newWindow.document.close();
        });
      } catch (error) {
        console.error('查看体检表失败', error);
      }
    },
    //打回
    async sendBack(physicalExamId) {
      try {
        const response = await axios.delete(`http://localhost:8081/material/deleteCheck/${physicalExamId}`);
        if (response.status === 200) {
          this.fetchPhysicalExams();
          this.$message.success('材料已成功打回并删除');
        }
      } catch (error) {
        console.error('删除体检表失败', error);
      }
    },
    changeStatus(material) {
      this.$message.success('操作成功！');
      material.passed = !material.passed;
    },
  }
};
</script>

<style>

</style>